import React from "react"
import {Card, CardBody} from "reactstrap"
import Chart from "react-apexcharts"
import {Edit3, Save} from "react-feather";
import {PrivateProjectProvider} from "../../../providers/PrivateProjectProvider";

class StatisticsCards extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Card>
        <CardBody
          className={`${this.props.className ? this.props.className : "stats-card-body"} d-flex ${
            !this.props.iconRight && !this.props.hideChart
              ? "flex-column align-items-start"
              : this.props.iconRight
              ? "justify-content-between flex-row-reverse align-items-center"
              : this.props.hideChart && !this.props.iconRight
                ? "justify-content-center flex-column text-center"
                : null
          } ${!this.props.hideChart ? "pb-0" : "pb-2"} pt-2`}
        >
          <div className="icon-section">
            <div
              className={`avatar avatar-stats p-50 m-0 ${
                this.props.iconBg
                  ? `bg-rgba-${this.props.iconBg}`
                  : "bg-rgba-primary"
              }`}
            >
              <div className="avatar-content">{this.props.icon}</div>
            </div>
          </div>
          <div className="title-section">
            <p className="mb-25">{this.props.statTitle}</p>
            <div className="d-flex align-items-center">
              {
                this.props.isUpdateCard ? (
                    <input
                      type={this.props.type}
                      onChange={e => this.props.editCard(e.target.value)}
                      value={this.props.stat}
                      className={`release-content-list-item release-stats-edit w-100 ${this.props.nameValid ? 'custom-input-invalid' : ''}`}
                    />
                  ) :
                  (
                    this.props.stat ?
                      <h2 className="text-bold-600 mb-0">{this.props.stat}</h2> :
                      <h5 className="text-bold-600 mb-0 mr-3"></h5>
                  )
              }
              <PrivateProjectProvider owner={this.props.owner} verifyId={this.props.verifyId}>
                {
                  this.props.edited && (this.props.isUpdateCard ?
                    <Save color="#EBEEFC" width="16px" className="release-edit-icon" onClick={this.props.saveCard}/> :
                    <Edit3 color="#EBEEFC" width="16px" className="release-edit-icon"
                           onClick={() => this.props.updatedCard(true)}/>)
                }
              </PrivateProjectProvider>
            </div>

          </div>
        </CardBody>
        {!this.props.hideChart && (
          <Chart
            options={this.props.options}
            series={this.props.series}
            type={this.props.type}
            height={this.props.height ? this.props.height : 100}
          />
        )}
      </Card>
    )
  }
}

export default StatisticsCards
